<template>
  <div class="container">
    <p class="oneP">系统培训</p>

    <ul class="ul1 animation-box">
      <li :class="{'topmove':liIndex==index}" v-for="(item,index) in arr1" :key="index" :style="{background:'url('+url[index]+') no-repeat center center' }" @mouseover="show(index)" @mouseout="show(5)">
        <div>
          <p>{{item[0]}}</p>
          <img src="../../assets/img/agent/39.png" alt="" class="line">
          <p class="p2">培训对象：
            <span>{{item[1]}}</span>
          </p>
          <p class="p2">培训方式：
            <span>{{item[2]}}</span>
          </p>
          <div class="p2" style="">培训内容：<br>
            <p>
              <span :style="{background:'url('+titleImg[index]+') no-repeat center center' }" class="titleUrl"></span>
              <span>{{item[3]}}</span>
            </p>
              <p>
              <span :style="{background:'url('+titleImg[index]+') no-repeat center center' }" class="titleUrl"></span>
              <span>{{item[4]}}</span>
            </p>
              <p>
              <span :style="{background:'url('+titleImg[index]+') no-repeat center center' }" class="titleUrl"></span>
              <span>{{item[5]}}</span>
            </p>
              <p>
              <span :style="{background:'url('+titleImg[index]+') no-repeat center center' }" class="titleUrl"></span>
              <span>{{item[6]}}</span>
            </p>
              <p v-if="item[7]!==undefault">
              <span :style="{background:'url('+titleImg[index]+') no-repeat center center' }" class="titleUrl"></span>
              <span>{{item[7]}}</span>
            </p>
            <span style="margin-left:35px;">......</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
require('../../assets/css/p.css')
const img1 = require('../../assets/img/agent/40.png')
const img2 = require('../../assets/img/agent/42.png')
const img3 = require('../../assets/img/agent/44.png')
const img4 = require('../../assets/img/agent/46.png')
const img6 = require('../../assets/img/agent/38.png')
const img7 = require('../../assets/img/agent/41.png')
const img8 = require('../../assets/img/agent/43.png')
const img9 = require('../../assets/img/agent/45.png')
const img10 = require('../../assets/img/agent/39.png')
export default {
  data() {
    return {
      arr1: [
        [
          '产品培训',
          '全员',
          'PPT',
          '大数据精确音效',
          '基础知识',
          '产品知识',
          '投放原理',
          '媒体介绍'
        ],
        [
          '营销培训',
          '销售',
          '视频+PPT',
          '营销流程',
          '考核标准',
          '销售技巧',
          '投放原理'
        ],
        [
          '运营培训',
          '运营',
          '视频+PPT+表格',
          '开户充值',
          '演示广告',
          '投放广告',
          '监控优化'
        ],
        [
          '干货培训',
          '全员',
          '微信+YY语音',
          '疑难解答',
          '案例分享',
          '经验分享',
          '实战指导'
        ]
      ],
      liIndex: null,
      url: [img6, img7, img8, img9],
      titleImg: [img1, img2, img3, img4]
    }
  },
  methods: {
    show(index) {
      console.log(index)
      this.liIndex = index
    }
  }
}
</script>
<style scoped>
.container {
  width: 1200px;
  margin: 0 auto;
  margin-top: 80px;
  overflow: hidden;
  text-align: center;
}

.ul1 {
  overflow: hidden;
  margin-top: 60px;
  padding: 7px;
  width: 102%;
  padding: 7px;
  padding-top: 15px;
  position: relative;
}
.ul1 > li {
  width: 302px;
  text-align: center;
  height: 417px;
  float: left;
  position: relative;
  margin-left: 0px;
}

.ul1 > li:first-child {
  margin-left: 0;
}
.animation-box li {
  -webkit-transition: all 0.5s, opacity 0.5s;
  transition: all 0.5s, opacity 0.5s;
}
.top {
  margin-top: 55px;
  margin-left: 0%;
}
li:nth-child(4) .top {
  margin-left: -1%;
}
li > div > p:nth-child(1) {
  font-size: 16px;
  margin-top: 40px;
}

.line {
  margin-left: 0px;
  margin-top: 5px;
}
.p2 {
  margin-top: 10px;
  font-size: 14px;
  text-align: left;
  padding-left: 85px;
}
.p2 span {
  font-size: 13px;
  font-weight: 100;
}
.oneButton {
  width: 140px;
}
.topmove {
  transform: translateY(-10px);
}
.p2 .titleUrl {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 20px;
}
.p2 p{
  margin-top:5px;
}
</style>